<template>
  <div class="pb-20px pl-20px pr-20px">
    <Breadcrumb :items="['问卷管理', '创建问卷']" />
    <a-card class="general-card" title="创建问卷">
      <a-form
        ref="formRef"
        :model="form"
        :style="{ width: '600px' }"
        @submit="handleOk"
      >
        <a-form-item
          field="title"
          label="标题"
          :rules="[{ required: true, message: '请输入标题' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model="form.title" placeholder="请输入标题" />
        </a-form-item>
        <a-form-item field="desc" label="描述">
          <a-textarea v-model="form.desc" placeholder="请输入描述" />
        </a-form-item>
        <a-form-item label="题目类型">
          <a-space>
            <a-button type="primary" @click="addOption(1)">输入框</a-button>
            <a-button type="primary" @click="addOption(2)">单选框</a-button>
          </a-space>
        </a-form-item>
        <QuestionList
          :list="form.topic"
          @add-option="handleAddOption"
          @del-option="handleDelOption"
        />
        <a-form-item>
          <a-button type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { storeApi } from '@/api/paper';
  import { Message } from '@arco-design/web-vue';
  import { useRouter } from 'vue-router';
  import QuestionList from './components/question-list.vue';

  const router = useRouter();
  const form = ref({
    id: 0,
    title: '',
    desc: '',
    topic: [],
  });
  const formRef = ref();
  const handleOk = () => {
    formRef.value
      .validate()
      .then((result: any) => {
        if (result) {
          Message.info({
            content: '请输入必填项',
            duration: 3 * 1000,
          });
          return;
        }
        storeApi(form.value)
          .then(() => {
            Message.success({
              content: '成功',
              duration: 3 * 1000,
            });
            router.push({
              name: 'paper.list',
            });
          })
          .catch(() => {
            // error
          });
      })
      .catch(() => {
        // error
      });
  };
  const addOption = (type: number) => {
    switch (type) {
      case 1:
        (form.value.topic as any).push({
          title: '',
          desc: '',
          type,
          isRequired: true,
        });
        break;
      case 2:
        (form.value.topic as any).push({
          title: '',
          desc: '',
          type,
          isRequired: true,
          options: [
            {
              value: '',
              desc: '',
            },
          ],
        });
        break;
      default:
    }
  };

  const handleAddOption = (data: any) => {
    (form.value.topic[data.index] as any).options.push({
      value: '',
      desc: '',
    });
  };

  const handleDelOption = (data: any) => {
    (form.value.topic[data.index] as any).options.splice(data.optionIndex, 1);
  };
</script>
